<template>
	<div class="ll-page">
		<!-- S 查询 -->
		<div class="ll-page-query flex">
			<n-form
				inline
				:model="formValue"
				label-placement="left"
				:show-feedback="false"
				class="flex-1 flex-wrap"
			>
				<n-form-item label="创作者信息：" path="value">
					<n-input
						v-model:value="formValue.agentInfo"
						placeholder="输入创作者姓名/电话搜索"
						:autosize="true"
						class="w-220px"
						@keyup.enter="getList"
					/>
				</n-form-item>
				<n-form-item label="状态：" path="value">
					<n-select
						v-model:value="formValue.status"
						:options="options"
						class="w-193px"
						@update:value="getList"
					/>
				</n-form-item>
				<n-form-item label="提交时间：" path="value">
					<n-date-picker v-model:value="timeData" type="daterange" @update:value="getList" />
				</n-form-item>
			</n-form>
			<n-space>
				<n-button color="rgba(0, 0, 0, 0.1)" text-color="#333333" @click="handelReset">
					重置
				</n-button>
			</n-space>
		</div>
		<!-- E 查询 -->

		<!-- S 表格 -->
		<div class="ll-page-table">
			<n-data-table
				:columns="columns"
				:data="tabelData"
				:pagination="pagination"
				:remote="true"
				:loading="tableLoading"
				size="small"
				flex-height
				:style="{ height: '100%' }"
			/>
		</div>
		<!-- E 表格 -->
	</div>
</template>
<script setup>
import { h, ref, reactive, watch, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import dayjs from 'dayjs';
// 导入API接口
import { getWithdrawStatus, getWithdrawList } from '@/api/withdraw';

const router = useRouter();
const route = useRoute();

// 状态
let options = ref([]);
onMounted(async () => {
	let res = await getWithdrawStatus(null);
	if (res && res.code === 200) {
		options.value = res.data;
	}
	getList();
});

// 表格
const columns = [
	{
		title: '申请时间',
		key: 'createTime'
	},
	{
		title: '个人信息',
		key: 'name',
		render(row) {
			return [
				h('div', {}, `${row.name ? row.name : ''}`),
				h('div', {}, `${row.mobile ? row.mobile : ''}`)
			];
		}
	},
	{
		title: '账户信息',
		key: 'accountInfo',
		render(row) {
			return [
				h('div', {}, `开户名：${row.bankAccount ? row.bankAccount : ''}`),
				h('div', {}, `开户银行：${row.bankName ? row.bankName : ''}`),
				h('div', {}, `银行卡号：${row.bankCard ? row.bankCard : ''}`)
			];
		}
	},
	{
		title: '提现金额',
		key: 'moneyYuan',
		render(row) {
			return [h('div', {}, `¥${row.moneyYuan ? row.moneyYuan : ''}`)];
		}
	},
	{
		title: '状态',
		key: 'statusChinese',
		render(row) {
			return [h('div', {}, `${row.statusChina}`)];
		}
	}
];
const tabelData = ref([]);
const tableLoading = ref(false);

// 提交时间
const timeData = ref(null);
// 查询条件
const formValue = reactive({
	agentInfo: null,
	endDate: null,
	startDate: null,
	status: null,
	pageIndex: 1,
	pageSize: 10
});

// 分页
const pagination = reactive({
	page: 1,
	pageSize: formValue.pageSize,
	pageSizes: [10, 20, 30, 40],
	showSizePicker: true,
	showQuickJumper: true,
	itemCount: 0,
	prefix({ itemCount }) {
		return `共${itemCount}条`;
	},
	onChange: (page) => {
		pagination.page = page;
		formValue.pageIndex = page;
		getList();
	},
	onPageSizeChange: (pageSize) => {
		pagination.pageSize = pageSize;
		formValue.pageSize = pageSize;
		formValue.pageIndex = 1;
		pagination.page = 1;
		getList();
	}
});

// 获取列表
const getList = async () => {
	formValue.endDate =
		timeData.value === null ? null : dayjs(timeData.value[1]).format('YYYY-MM-DD') + ' 23:59:59';
	formValue.startDate =
		timeData.value === null ? null : dayjs(timeData.value[0]).format('YYYY-MM-DD') + ' 00:00:00';
	console.log(formValue);

	tableLoading.value = true;
	let res = await getWithdrawList(formValue);
	tableLoading.value = false;
	if (res && res.code === 200) {
		tabelData.value = res.data.data;
		console.log(tabelData);
		pagination.itemCount = res.data.rowCount;
	}
};

// 重置
const handelReset = () => {
	formValue.agentInfo = null;
	formValue.endDate = null;
	formValue.startDate = null;
	// formValue.status = options.value[0].value;
	formValue.status = null;
	formValue.pageIndex = 1;
	formValue.pageSize = 10;
	timeData.value = null;
	getList();
};
</script>

<style lang="less" scoped>
.ll-page {
	height: 100%;
	flex-direction: column;
	display: flex;
	background-color: #ffffff;
	&-query {
		background: @bg;
		padding: @padding-10 @padding-10 0 @padding-10;
		margin-right: 10px;
		margin-left: 10px;
		margin-top: 10px;
		border-radius: 3px;
		border: 1px solid #f0f0f0;
	}
	&-table {
		padding: 10px;
		overflow: hidden;
		flex: 1 1 0%;
	}
}
.n-form-item {
	margin-bottom: @margin-10;
}
</style>
